<template>
	<view>
		<!-- 主体 -->
		<view class="page page-register">
			<!-- 卡片 -->
			<view class="banner bg-cover" :style="{backgroundImage: 'url(https://newbeaconyt.oss-cn-hangzhou.aliyuncs.com/app/hotel/my/register.png)'}"></view>
			<!-- 注册信息 -->
			<view class="register-box">
				<view class="item" @tap="openHotels">
					<view class="label">所属酒店：</view>
					<view class="flex-1 flex-row-between" :style="{color: hotels.selected ? '#1e1e1e' : '#c8c8c8'}">
						<view class="hotel ellipsis">{{hotels.selected ? hotels.selected.name : '请选择所属酒店'}}</view>
						<uni-icons type="arrowright" size="10" color="#3f3f3f"></uni-icons>
					</view>
				</view>
				<view class="item">
					<view class="label">员工姓名：</view>
					<input v-model="form.name" type="text" placeholder="请输入姓名" placeholder-class="placeholderClass" @input="Onname" />
				</view>
				<view class="item">
					<view class="label">手机号码：</view>
					<input v-model="form.mobile" type="number" placeholder="请输入手机号码" placeholder-class="placeholderClass" @input="Onmobile" />
				</view>
				<view class="item">
					<view class="label">验&nbsp;&nbsp;证&nbsp;&nbsp;码：</view>
					<input v-model="form.code" type="number" placeholder="请输入验证码" placeholder-class="placeholderClass" @input="Oncode" />
					<button class="getcode" :disabled="wait > 0" @click.stop="getVerifyCode">
						<text v-if="wait > 0">等待{{wait}}秒</text>
						<text v-else>获取验证码</text>
					</button>
				</view>
				<view class="item">
					<view class="label">员工性别：</view>
					<uni-data-checkbox class="flex-1"
						v-model="gender.value"
						:localdata="gender.range"
						:selectedColor="themeColor"
						selectedTextColor="#1e1e1e"
						@change="Onsex">
					</uni-data-checkbox>
				</view>
				<view class="item">
					<view class="label">员工生日：</view>
					<view class="flex-1 date">
						<biaofun-datetime-picker
							placeholder="请选择生日"
							:defaultValue="calendar.defaultValue"
							:start="calendar.start"
							:end="calendar.end"
							fields="day"
							@change="Onbirthday"
						></biaofun-datetime-picker>
					</view>
					<uni-icons type="arrowright" size="12" :color="themeColor"></uni-icons>
				</view>
				<!-- 协议 -->
				<view class="check-box flex-row-start" :class="{ checked: agreement }" @click="toggleCheck">
					<view class="inner"></view>
					<text class="info">我已经阅读并同意</text>
					<text class="info font-link" @click.stop="openAgree">《璞廷会会员协议》</text>
				</view>
				<!-- 注册按钮 -->
				
				<!--  #ifdef  MP-WEIXIN -->
				<view class="btn font15 font-ffffff flex-row-center" @click="submit">立即注册</view>
				<!--  #endif -->
				
				<!--  #ifdef  H5 -->
				<view class="btn font15 font-ffffff flex-row-center" @click="submit()">立即注册</view>
				<!--  #endif -->
				
			</view>
		</view>
		
		<!-- 酒店列表弹窗 -->
		<Compicker ref="hotels" mode="name" @callback="Onhotel"></Compicker>
		
		<!-- 协议弹窗 -->
		<uni-popup ref="rule" type="center">
			<view class="popup-rule">
				<view class="title font15 tc">璞廷会会员协议</view>
				<scroll-view class="content" :scroll-y="true">
					<rich-text :nodes="agreementRich"></rich-text>
				</scroll-view>
				<view class="btn-long" @click="closeAgree">知道了</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import biaofunDatetimePicker from '@/components/biaofun-datetime-picker/index.vue';
	import Compicker from "@/components/j-Compicker/index.vue";
	export default {
		components: { biaofunDatetimePicker, Compicker },
		data() {
			return {
				themeColor: '#03004c',
				calendar: {
					defaultValue: this.$base.formatTime(new Date(), "yyyy-MM-dd"),
					start: '1940-01-01',
					end: this.$base.formatTime(new Date(), "yyyy-MM-dd")
				},
				// 性别
				gender: {
					value: '1',
					range: [
						{ value: '1', text: "男" },
						{ value: '2', text: "女" }
					]
				},
				// 酒店
				hotels: {
					selected: null,
					list: []
				},
				agreement: true, // 是否接受协议
				agreementRich: '', // 协议内容
				wait: 0, // 验证码等待的时间
				timer: null,
				form: {
					type: 'employ',
					group: this.group,
					name: '',
					mobile: '',
					code: '',
					gender: '1',
					birthday: this.$base.formatTime(new Date(), "yyyy-MM-dd"),
					hotel_id: ''
				}
			}
		},
		onLoad (options) {
			// #ifdef H5
			this.form.openid = uni.getStorageSync("openid");
			// #endif
			
			// 获取酒店列表
			this.$Http({
				url: 'unit'
			}).then(res => {
				if (res.code == 1) {
					// 初始化酒店下拉
					this.$refs.hotels.Ondata(res.data, 0)
				} else {
					uni.showToast({  title: res.msg, icon: 'none' });
				}
			});
			
			// 获取协议
			this.$Http({
				url: 'agreement'
			}).then(res => {
				if (res.code == 1) {
					this.agreementRich = res.data
				}
			});
		},
		onShow: function() {
			// #ifdef MP-WEIXIN
			wx.login({
				success: res => {
					this.form.wx_code = res.code
				}
			})
			// #endif
		},
		methods: {
			// 打开酒店
			openHotels () {
				this.$refs.hotels.Onopen()
			},
			// 选择酒店
			Onhotel(e) {
				this.hotels.selected = e
				this.form.hotel_id = e.id
			},
			Onname(e) {
				this.form.name = e.detail.value
			},
			Onmobile(e) {
				this.form.mobile = e.detail.value
			},
			Oncode(e) {
				this.form.code = e.detail.value
			},
			Onsex(e){
				this.form.gender = e.detail.value
			},
			Onbirthday (date) {
				this.form.birthday = date.f1
			},
			// 获取手机验证码
			getVerifyCode () {
				if (this.$base.checkMobile(this.form.mobile)) {
					this.$Http({
						url: 'sendCode',
						data: {
							mobile: this.form.mobile,
							event: 'register'
						},
					}).then(res => {
						if (res.code == 1) {
							uni.showToast({ title: '验证码发送成功' })
							this.wait = 60
							this.timer = setInterval(() => {
								this.wait--
								if (this.wait === 0) {
									clearInterval(this.timer)
								}
							}, 1000)
						} else {
							uni.showToast({ title: res.msg, icon: 'none' })
						}
					});
				} else {
					uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })
				}
			},
			// 协议勾选
			toggleCheck () {
				this.agreement = !this.agreement
			},
			// 打开协议
			openAgree () {
				this.$refs.rule.open()
			},
			// 关闭协议
			closeAgree () {
				this.$refs.rule.close()
			},
			// 提交表单
			submit () {
				if (this.form.hotel_id == '') {
					uni.showToast({  title: '请选择所属酒店', icon: 'none' });
					return false;
				}
				if (this.form.name == '') {
					uni.showToast({  title: '请输入您的姓名', icon: 'none' });
					return false;
				}
				if (!this.$base.checkMobile(this.form.mobile)) {
					uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })
					return
				}
				if (this.form.code == '') {
					uni.showToast({  title: '请输入验证码', icon: 'none' });
					return false;
				}
				if (this.form.birthday == '') {
					uni.showToast({  title: '请选择您的生日', icon: 'none' });
					return false;
				}
				if (!this.agreement) {
					uni.showToast({  title: '请阅读并同意会员协议', icon: 'none' });
					return false;
				}
				this.$Http({
					url: 'register',
					data: this.form,
					type: 'POST'
				}).then(res => {
					if (res.code == 1) {
						uni.redirectTo({ url: '/pages/common/wait' })
					} else {
						uni.showToast({  title: res.msg, icon: 'none' });
					}
				});
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
